<style lang="scss" scoped>
	.header {
		width: 100%;
		border-bottom: 1px solid #dee2ee;
		background-color: white;
		padding: 0 30rpx;
		height: 100rpx;

		.date2 {
			width: 400rpx;
			height: 100rpx;
			padding: 0 30rpx;

			.sbtn {
				width: 40rpx;
				height: 40rpx;
				background: #dee2ee;
				border-radius: 8rpx;
				color: #879bba;
			}
		}

		.rbtn {
			width: 136rpx;
			height: 44rpx;
			background: #f5f7fa;
			border-radius: 22rpx;
		}
	}

	.line {
		height: 100rpx;
		padding: 0 30rpx;
		color: #409EFF;
		font-size: 28rpx;
		background-color: white;
		border-bottom: 1px solid #dee2ee;

		.sbtn {
			width: 212rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;

		}
	}

	.calendar{
		
		
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2; 
		padding:30rpx;
		box-sizing: border-box;
		.time{
			font-size: 40rpx;
		}
		.weeks{
			margin:40rpx 0; 
			.week_item{
				width: 90rpx;
				color: #98a5b3;
			}
		}
		.days{
			width:100%;
			.day_line{
				width:100%;
				margin-bottom: 12rpx;
			}
			.day_item{
				width: 90rpx;
				height: 96rpx;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding:10rpx 0;
				.balls{
					width:70rpx;
					flex-wrap: wrap;
					.ball{
						width: 14rpx;
						height: 14rpx;
						
						border-radius: 50%;
						margin:5rpx;
					}
				}
			}
			.today{
				background: #f0f3f7;
				color: #409eff;
				font-weight: 600;
			}
			.checked{
				
				color: #409eff;
				font-weight: 600;
				border: 2rpx solid #409eff;
			}
		}
		.colors{
			flex-wrap: wrap;
			.color{
				padding:5rpx 10rpx;
				border-radius: 8rpx;
				margin-right: 10rpx;
			}
		}
	}
</style>

<template>
	<view class="date">
		<view class="header between-flex">
			<view class="f28 blue" @click="getDate()">回到本月</view>
			<view class="date2 between-flex">
				<view class="sbtn center-flex" @click="pre()">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view @click="show=true">{{nowYear}}</view>
				<view class="sbtn center-flex" @click="next()">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="rbtn center-flex f24 c999" @click="showSheet=true">{{dutyType.dutyType}} <u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="line between-flex">
			<view class="sbtn center-flex" @click="goWeek">
				查看周视图
			</view>
			<view class=" one textColor" style="max-width:450rpx;" v-if="dept" >{{dept.value | subject}}
				
			</view>
		</view>
		
			<swiper :indicator-dots="false"  @change="change" :current="current" :duration="200" :circular="true" style="height:1270rpx;width:690rpx;margin:30rpx auto;">
				<swiper-item v-for="calendar,i in 3" :key="i" class="calendar " style="width:690rpx;">
					<view class="time center-flex textColor bold">{{nowYear}}年{{nowMonth}}月</view>
					<view class="weeks flex">
						<view class="week_item center-flex f24" v-for="item,index in week" :key="index">{{item.name}}</view>
					</view>
					<view class="days">
						<view class="day_line flex" v-for="item,index in week_list" :key="index">
							
							<view v-if="item2" class="day_item " @click="choose(index,index2,item2)" :class="item2.holidayTime==checkedInfo.holidayTime?'checked':item2.holidayTime.indexOf(today)!=-1?'today':''" v-for="item2,index2 in item" :key="index2">
								{{item2.day?item2.day:''}}
								<view class="balls center-flex">
									<view  v-if="(dutyType.id==''||dutyType.id==item4.rules)" class="ball" :style="{background:item4.colorCode}" v-for="item4,index4 in item2.core" :key="index4"></view>
								</view>
							</view>
							<view v-else class="day_item "></view>
						</view>
					</view>
					<view class="colors">
						<view class="align-flex  gray f20">
							<view class="p-right10">
								各颜色代表班次  
							</view>
						<span class="color cfff f24" v-for="dutyitem,dutyindex in dutyInfo" :key="index" :style="{background:dutyitem.colorCode}">{{dutyitem.dutyType}}</span></view>
					</view>
					<u-line margin="30rpx 0"></u-line>
					
					<scroll-view scroll-y="true" style="height:400rpx;">
						<view class="colors m-bottom20" v-if="checkedDay.my.length>0">
							<view class="textColor f28 bold">
								我的
							</view>
							<view class="align-flex m-top20">
								<span class="color cfff f24" v-for="myitem,myindex in checkedDay.my" :key="myindex" :style="{background:myitem.colorCode}">{{myitem.dutyType}}</span>
							</view>
							
						</view>
						<view v-if="checkedDay.other&&checkedDay.other.length>0">
							<view class="textColor f28 bold">
								其他人
							</view>
							<view class="colors align-flex m-top20"  v-for="other,otherindex in checkedDay.other" :key="otherindex" >
								<view class="textColor f28 m-right20">{{other.userid | user}}</view>
								<view class="align-flex ">
									<span class="color cfff f24" v-for="oitem,oindex in other.duty" :key="oindex"  :style="{background:oitem.colorCode}">{{oitem.dutyType}}</span>
								</view>
								
							</view>
						</view>
						
						
					</scroll-view>

				</swiper-item>
				
			</swiper>
			
		
		
		<u-picker v-model="show" :params="params" mode="time" @confirm="chooseDate"></u-picker>
		<u-action-sheet :list="sheetArr" @click="click" v-model="showSheet"></u-action-sheet>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				userId: this.$getUser().value,//用户的自己ID
				week: [{
						name: '一',
						key: 'Monday'
					},
					{
						name: '二',
						key: 'Tuesday'
					},
					{
						name: '三',
						key: 'Wednesday'
					},
					{
						name: '四',
						key: 'Thursday'
					},
					{
						name: '五',
						key: 'Friday'
					},
					{
						name: '六',
						key: 'Saturday'
					},
					{
						name: '日',
						key: 'Sunday'
					}
				],
				current: 0,
				today: '',
				nowYear: '',
				nowMonth: '',
				week_list: [],
				dept:null,
				params: {
					year: true,
					month: false,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				show: false,
				sheetArr:[{
						text: '转工单'
					},
					{
						text: '终止'
					}
				],
				showSheet:false,
				dutyType:{
						dutyType:'所有班',
						id:''
					},//值班类型
				dutyInfo:[],
				checkedInfo:null,
				checkedDay:{
					my:[],
					other:[]
				},
				other_week_list:[]
			}
		},

		onLoad() {
			this.dept=this.$getdept()
			this.today = this.getDate()
			this.getSheet()
			
		},
		methods: {
			choose(index,index2,item){
				this.checkedInfo=item
				this.checkedDay.my=item.core
				if(this.other_week_list[index][index2].other){
					this.checkedDay.other=this.other_week_list[index][index2].other
				}else{
					this.checkedDay.other=[]
				}
				
			},
			goWeek(){
				uni.redirectTo({
					url:'/pagesA/arrange/arrange'
				})
			},
			click(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.sheetArr[index].text}`)
				this.dutyType=this.sheetArr[index]
			},
			chooseDate(e) {
				
				this.nowYear=e.year
				
				this.init()
			},
			init() {
				this.checkedDay={
					my:[],
					other:[]
				}
				this.$showloading()
				this.getOtherDuty()
				this.$pop.ajaxPost('/busSchedulCore/getMonthInfo', {
					month: `${this.nowYear}-${this.nowMonth}`,
					userId: this.userId
				}).then(res => {
					var list = res.body
					var week_list = [
						[]
					]
					list.forEach(item => {
						this.week.forEach((item2, index2) => {
							if (item2.key == item.week) {
								if (week_list[week_list.length - 1].length < 7) {
									week_list[week_list.length - 1][index2] = item
								} else {
									week_list.push([])
									week_list[week_list.length - 1][index2] = item
								}
							}
						})

					})
					// console.log('week_list', week_list)
					
					this.week_list = week_list
					week_list.forEach((item,index)=>{
						item.forEach(item2=>{
							if(item2.holidayTime.indexOf(this.today)!=-1){
								this.checkedDay.my=item2.core
								this.checkedInfo=item2
							}
						})
					})
					uni.hideLoading()
				})
			},
			getOtherDuty() {
				this.$pop.ajaxPost('/busSchedulCore/getMonthInfo', {
					month: `${this.nowYear}-${this.nowMonth}`
				}).then(res => {
					var list = res.body
					var other_week_list = [
						[]
					]
					list.forEach(item => {
						var users=[]
						item.core.forEach(temp=>{
							
							temp.schedulUsers.forEach(user=>{
								user=user.user.split(',')
								user.forEach(i=>{
									if(i!=this.userId){//不知自己的排班
										var flag=true
										var index=-1
										users.forEach((item2,index2)=>{
											if(item2.userid==i){
												flag=false
												index=index2
											}
										})
										if(flag){//没有这个用户新建
											users.push({
												userid:i,
												duty:[temp]
											})
										}else{//有这个用户给这个用户push一个班次
											users[index].duty.push(temp)
										}
									}
									
									
								})
								
							})
							
						})
						item.other=users
					
						this.week.forEach((item2, index2) => {
							if (item2.key == item.week) {
								console.log('item',item)
								if (other_week_list[other_week_list.length - 1].length < 7) {
									other_week_list[other_week_list.length - 1][index2] = item
								} else {
									other_week_list.push([])
									other_week_list[other_week_list.length - 1][index2] = item
								}
							}
						})
			
					})
					
					for(let i=0;i<7;i++){
						// console.log()
						if(!other_week_list[0][i]){
							other_week_list[0][i]={
								core:[]
							}
						}
						if(!other_week_list[other_week_list.length-1][i]){
							other_week_list[other_week_list.length-1][i]={
								core:[]
							}
						}
					}
					// console.log('other_week_list', week_list)
				
				
					other_week_list.forEach((item,index)=>{
						item.forEach(item2=>{
							if(item2.holidayTime&&item2.holidayTime.indexOf(this.today)!=-1){
								this.checkedDay.other=item2.other
								
							}
						})
					})
					console.log('other_week_list',other_week_list)
						this.other_week_list = other_week_list
					console.log('checkedDay',this.checkedDay)
					uni.hideLoading()
				})
			},
			pre() {
				this.nowYear-=1
			
				this.init()

			},
			next() {
				this.nowYear+=1
				
				this.init()
			},
			getDate() { //获取今天
				var time = new Date().getTime()
				var date = new Date(time);
				this.dayIndex = date.getDay();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var hour = date.getHours()
				var min = date.getMinutes()
				month < 10 ? month = '0' + month : ''
				strDate < 10 ? strDate = '0' + strDate : ''
				hour < 10 ? hour = '0' + hour : ''
				min < 10 ? min = '0' + min : ''
				this.nowMonth = month
				this.nowYear = date.getFullYear()
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate;
				this.init()
				return currentdate;
			},
			change(e) {
				let current = e.detail.current
				let oldIndex=this.current
				this.current=current
				console.log(oldIndex - current)
				if(oldIndex - current == -1 || oldIndex - current == 2){
					console.log('向右滑动前一个月')
					let preMonth = Number(this.nowMonth) + 1;
					if (preMonth <= 12) {
						preMonth = preMonth
					} else {
						preMonth = 1;
						this.nowYear = this.nowYear + 1;
					}
					
					preMonth < 10 ? preMonth = '0' + preMonth : '';
					this.nowMonth = preMonth
					
					this.init()
					
					
				} else {
					console.log('向左滑动后退一个月')
					let preMonth = Number(this.nowMonth) - 1;
					if (preMonth >= 1) {
						preMonth = preMonth
					} else {
						preMonth = 12;;
						this.nowYear = this.nowYear - 1;
					}
					
					
					preMonth < 10 ? preMonth = '0' + preMonth : '';
					this.nowMonth = preMonth
					
					this.init()
					
				}
				
			},
			getSheet(){
				this.$pop.ajaxPost('/busSchedulRules/getList').then(res=>{
					var list=res.body
					this.sheetArr=[{
						dutyType:'所有班',
						id:''
					}]
					this.sheetArr=this.sheetArr.concat(list)
					this.sheetArr.forEach(item=>{
						item.text=item.dutyType
					})
					this.dutyType=this.sheetArr[0]
					this.$forceUpdate()
					console.log(this.sheetArr)
				})
				this.$pop.ajaxPost('/busSchedulRules/getListInfo').then(res=>{
					this.dutyInfo=res.body
				})
			}
		}
	}
</script>
